<template>
  <div class="layout-page supply-detail">
    <div class="h-132px page-top">
      <div class="w-1328px mx-auto lh-132px fw-700 font-size-36px text-white">
        硬件详情
      </div>
    </div>
    <div class="layout-page-inner w-90%">
      <el-breadcrumb :separator-icon="ArrowRight" class="my-16px">
        <el-breadcrumb-item to="/hardware">硬件购买</el-breadcrumb-item>
        <el-breadcrumb-item>硬件详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="content-top">
        <div class="top-item" style="margin-right: 50px">
          <span>发布时间：{{ data.createTime?.slice(0, 10) }}</span>
        </div>
        <div class="top-item">
          <span>发布人：{{ data.createBy }}</span>
        </div>
      </div>
      <hr class="divider">
      <div class="content">
        <div class="left">
          <div class="content-inner">
            <div>
              <label>公司名称：</label>
              <div>{{ data.companyName }}</div>
            </div>
            <div>
              <label>联系人：</label>
              <div>{{ data.contactUser }}</div>
            </div>
            <div>
              <label>联系电话：</label>
              <div>{{ data.contactUserMobile }}</div>
            </div>
            <div>
              <label>资源描述：</label>
              <div>{{ data.paramDesc }}</div>
            </div>
            <div>
              <label>交货地点：</label>
              <div>{{ data.goodsAddress }}</div>
            </div>
            <div>
              <label>期货价格：</label>
              <div>{{ data.futuresPrice }}￥</div>
            </div>
            <div>
              <label>销售数量：</label>
              <div>{{ data.goodsNumber }}</div>
            </div>
            <div>
              <label>现货价格：</label>
              <div>{{ data.spotPrice }}￥</div>
            </div>
            <div>
              <label>备注：</label>
              <div>{{ data.remark }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <img v-if="data.infoPicUrl" :src="data.infoPicUrl" alt="信息大图" class="info-image"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { ArrowRight } from "@element-plus/icons-vue";
import $api from "@/api/hardware";

const route = useRoute();
const loading = ref(false);
const data = ref({});

const fetchData = async (id) => {
  loading.value = true;
  try {
    const response = await $api.getGoodsDetail(id);
    data.value = response.data;
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  const id = route.params.id;
  if (id) {
    fetchData(id);
  }
});

</script>

<style scoped>
.page-top {
  background: url("/supply-detail-bg.png") no-repeat center;
  background-size: cover;
}
.layout-page-inner {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.content-top {
  display: flex;
  margin-bottom: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}
.top-item {
  font-size: 16px;
  color: #333;
}
.divider {
  border: none;
  border-top: 1px solid #ddd;
  margin-bottom: 16px;
}
.content {
  display: flex;
  justify-content: space-between;
}
.left, .right {
  flex: 1;
}
.content-inner {
  font-size: 14px;
  > div {
    line-height: 20px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    > label {
      color: #a5a9ad;
      width: 120px;
    }
    > div {
      color: #333;
    }
  }
}
.info-image {
  width: 300px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

<style lang="less">
.supply-detail {
  .content-inner {
    font-size: 14px;
    > div {
      line-height: 20px;
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;
      > label {
        color: #a5a9ad;
      }
      > div {
        color: @text-default;
      }
    }
  }
}
</style>
